<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>微动天下</title>
<link rel="stylesheet" href="__VDONG__/css/reset.css" />
<style>
    .wrap{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .logo{
      margin-top: 20px;
      display: block;
    }
    .login_bg{
      width: 100%;
      min-width:1400px;
      height: 100%;
      object-fit: cover;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
    .login_left{
      display: block;
      width: 55%;
      position: absolute;
      bottom: 10px;
    }
    .loginBox{
      max-width: 1200px;
      min-width: 1200px;
      margin: 0 auto;
      position: relative;
      height: 100%;
    }
    .login_form{
      background: #fff;
      width: 432px;
      height: 462px;
      border-radius: 8px;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -216px;
      padding: 30px 44px;
      line-height: 2.6;
      float: right;
    }
    .login_title{
      font-size: 16px;
      color:#333;
    }
    .login_input{
      font-size: 14px;
      color: #9A9A9A;
      background: #FCFCFC;
      border: 1px solid #CBCBCB;
      border-radius: 4px;
      display: block;
      width: 100%;
      height: 50px;
      line-height: 50px; 
      padding: 0 10px;
    }
    .login_btn{
      background: #FFC658;
      font-size: 20px;
      color: #fff;
      border-radius: 6px;
      width: 85%;
      height: 58px;
      line-height: 58px;
      border: none;
      outline: none;
      margin: 0 auto;
      display: block;
      cursor: pointer;
      text-align: center;
    }
    .login_btn:hover{
      background: #FFA400;
    }
    .login_prompt{
      font-size: 12px;
      color: #FF3636;
      line-height: 1.6;
    }
    .text_center{
      text-align: center;
      margin-bottom: 10px;
    }
    .hidden{
      visibility: hidden;
    }
    .border_red{
      border:1px solid #FF3636;
    }
  </style>
  <body>
    <div class="wrap">
      <img class="login_bg" src="__VDONG__/img/login_bg.png" />
      <div class="loginBox">
        <img class="logo" src="__VDONG__/img/logo.png" width="200" />
        <img src="__VDONG__/img/login_left.png" class="login_left" />
        <form class="login_form">
          <div>
            <p class="login_title">用户名</p>
            <p><input id="login_userName" class="login_input" type="text" placeholder="请输入您的用户名" /></p>
            <p id="userName" class="login_prompt hidden">用户名不能为空</p>
          </div>
          <div>
            <p class="login_title">密码</p>
            <p><input id="login_passWord" class="login_input" type="passWord" placeholder="请输入您的密码" /></p>
            <p id="userPassWord" class="login_prompt hidden">密码不能为空</p>
          </div>
          <div class="login_prompt text_center hidden" id="login_prompt">用户名或者密码错误，请重新输入</div>
          <a id="login_btn" type="submit" class="login_btn">登录</a>
          <div style="color: red" id="loginMsg"></div>
          <input type="hidden" value="{:url('user/dologin')}" id="loginUrl">
        </form>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="__VDONG__/js/jquery-1.8.3.min.js" ></script>
  <script>
    $(function () {
      $(document).keyup(function(event){
        if(event.keyCode ==13){
          $("#login_btn").trigger("click");
        }
      });
      $('#login_btn').click(function(){
        //基础用户名和密码验证 start
        var userName = $('#login_userName').val();
        var login_passWord = $('#login_passWord').val();
        var url =$('#loginUrl').val();
        if(userName==''){
          $('#userName').removeClass('hidden');
          return;
        }else{
          $('#userName').addClass('hidden')
        }
        
        if(login_passWord==''){
          $('#userPassWord').removeClass('hidden');
          return;
        }else{
          $('#userPassWord').addClass('hidden')
        }
        $.ajax({
        url: url,
        type: 'post',
        dataType: 'json',
        data: {username: userName,password: login_passWord},
        success:function(data){
          if(data.code==1){
            window.location.href=data.url;
          }else{
            $('#loginMsg').text(data.msg);
          }
        },
        error:function(data){
          $('#loginMsg').text(data.msg);
        }
      })
        //基础用户名和密码验证 end
        
      })
    })
  </script>
    